<template>
  <KView class="remind-page-item" :class="{'is-read':notice.isLook}">
    <KView class="remind-page-item-time">{{$moment(notice.createTime).format('YYYY年MM月DD日 HH:mm')}}</KView>
    <KView class="remind-page-item-content">
      <wx-rich-text v-if="isMiniprogram" :nodes="noticeHtml" space="nbsp"></wx-rich-text>
      <div v-else v-html="noticeHtml"></div>
    </KView>
    <KView class="remind-page-item-btn clearfix">
      <KView @click="lookDetail">详情&nbsp;&gt;</KView>
    </KView>
  </KView>
</template>

<script>
  export default {
    props: {
      notice: {
        type: Object,
        required: true
      }
    },

    computed: {
      noticeHtml() {
        let content = this.notice.content;
        content = content.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
        return `<div class="notice-item-html">${content}</div>`;
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram
      };
    },

    methods: {
      lookDetail() {
        this.$emit('detail', this.notice);
      }
    }
  };

</script>

<style lang="scss">
  .remind-page-item {
    padding: formatPx(40) formatPx(30);
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 6px;

    .remind-page-item-time {
      width: formatPx(300);
      height: formatPx(40);
      border-radius: 6px;
      background: #59c264;
      color: #ffffff;
      line-height: formatPx(40);
      font-size: formatPx(24);
      text-align: center;
      margin: auto;
    }

    .remind-page-item-content {
      margin-top: formatPx(26);

      .notice-item-html {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.5;
        font-size: formatPx(26);
      }
    }

    .remind-page-item-btn {
      text-align: right;
      color: #59c264;
      margin-top: formatPx(10);
      height: formatPx(40);

      >div {
        width: formatPx(90);
        height: 100%;
        font-size: formatPx(26);
        line-height: formatPx(40);
        float: right;
        text-align: center;
      }
    }

    &.is-read {
      .remind-page-item-time {
        background: #cccccc;
      }

      .remind-page-item-content .notice-item-html {
        color: #999999;
      }

      .remind-page-item-btn {
        color: #999999;
      }
    }
  }

</style>
